<template>
	<view>
		<view class="boder-sa shadow-blur">
			<view class="cu-bar search bg-white shadow" style="position: fixed;top: 0px;width: 100%;z-index: 999;">
				<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big11010.jpg)"></view>
				<view class="search-form round padding-left-sm">
					<text class="icon-search"></text>
					<input :adjust-position="false" placeholder-class="text-center" type="text" placeholder="搜索小说标题" confirm-type="search" @input="Input" @confirm="Confirm"></input>
				</view>
			</view>
		</view>
		
		<!-- <view class="padding-lr-xl" style="margin-top: 100upx;">
			<text class="padding-sm" v-for="(item,index) in hotwords.searchHotWords" :key="index">{{item.word}}</text>
		</view> -->
		<view style="margin-top: 130upx;line-height: 40upx;" class="padding-lr-sm text-sm">搜索热词</view>
		<view class="padding-xs bg-white dashed-bottom" >
			<view v-if="index<20" class='cu-tag radius margin-bottom-xs' style="margin-left: 5px;background-color: #f7f7f7;" v-for="(item,index) in hotwords" :key="index" @click="searchNow" :data-keyword="item">{{item}}</view>
		</view>
		
		<view class="padding-sm">
			<view v-for="(item,index) in booklist" :key="index" class="padding-tb-sm margin-lr-sm flex justify-between solid-bottom" @click="ToBook(item.id)">
				<view style="width: 18%;">
					<image :src="item.cover" lazy-load="true" class="shadow" style="height: 160upx;width: 120upx;"></image>
				</view> 
				<view style="width: 77%;">
					<view class="text-bold text-lg" style="line-height: 60upx;">{{item.title}}</view>
					<view class="text-sm text-gray" style="line-height: 50upx;">{{item.author}} · {{item.cat}} · 
					<!-- {{parseInt(item.wordCount/10000)}}万字 -->
					</view>
					<view class="text-sm text-gray text-cut" style="line-height: 50upx;">{{item.lastChapter}}</view>
				</view>
			</view>
			
		</view>
		
		
		
		
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				hotwords : [],
				booklist : []
			}
		},

		onLoad(){ 
			that = this
			that.hotWorld();
		},
		async onReady() {
			var setting = await that.util.setting()
			// #ifdef H5
			var wx = await that.util.jssdk() 
			wx.ready(function () {	
				var sharedata = {
					title: setting.share_title,
					desc: setting.share_desc,
					imgUrl: setting.share_thumb,
					success: function(){
						
					},
					cancel: function(){							
					}
				};
				wx.onMenuShareAppMessage(sharedata);
				wx.onMenuShareTimeline(sharedata);						
			});
			// #endif
		},
		methods: {
			ToBook(e){
				uni.navigateTo({
					url: '/pages/book/book?id='+e
				});
			},
			
			hotWorld(){
				that = this
				that.util.request({
					'url' : 'HotWords',
					success:function(res){
						that.hotwords = res.data.data
					}
				})
			},
			
			Input(e){
				var keywork = e.detail.value
				that.util.request({
					'url' : 'VueComplete',
					'data' : {
						keywork : keywork
					},
					success:function(res){
						that.hotwords = res.data.data.keywords
					}
				})
			},
			
			Confirm(e){
				var keyworld = e.detail.value
				that.searchWork(keyworld)
			},
			
			searchNow(e){
				var keyworld = e.currentTarget.dataset.keyword
				that.searchWork(keyworld)
			},
			
			searchWork(e){
				that.util.request({
					'url' : 'VueSearch',
					'data' : {
						keyworld : e
					},
					success:function(res){
						that.booklist = res.data.data
					}
				})
			}
			
		},

	}
</script>

<style>
	page{background-color:#ffffff;}
</style>
